<template>
  <div class="date-picker-wrapper">
    <div class="date-picker-left">
      <div
        class="date-range-option"
        :class="{ 'is-active': currentRange === 'lastWeek' }"
        @click="handleRangeSelect('lastWeek')"
      >
        Last Week
      </div>

      <div
        class="date-range-option"
        :class="{ 'is-active': currentRange === 'lastMonth' }"
        @click="handleRangeSelect('lastMonth')"
      >
        Last Month
      </div>
      <div
        class="date-range-option"
        :class="{ 'is-active': currentRange === 'last3Months' }"
        @click="handleRangeSelect('last3Months')"
      >
        Last 3 months
      </div>
      <div
        class="date-range-option"
        :class="{ 'is-active': currentRange === 'thisYear' }"
        @click="handleRangeSelect('thisYear')"
      >
        This Year
      </div>
      <div class="custom-date-picker">
        <!-- <div class="date-range-title">Date Range</div> -->
        <div class="date-picker-input">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            align="right"
            unlink-panels
            format="dd/MM/yyyy"
            range-separator="—"
            size="large"
            class="transparent-date-picker"
            @change="handleDateRangeChange"
            popper-class="date-cell"
          />
        </div>
      </div>
    </div>

    <div class="date-picker-right">
      <div class="refresh-button">
        <img
          src="@/assets/refresh1.png"
          alt="Refresh"
          class="refresh-icon"
          @click="handleRefresh"
          ref="refreshIcon"
        />
      </div>

      <div class="filter-button">
        <el-popover
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          v-model="popoverVisible"
          popper-class="custom-filter-popover"
          ref="filterPopover"
          placement="bottom"
          :popper-options="{
            positionFixed: true,
            boundariesElement: 'viewport',
            modifiers: [
              { name: 'flip', enabled: false },
              { name: 'preventOverflow', enabled: false },
              { name: 'computeStyles', enabled: false },
              { name: 'offset', enabled: false },
            ],
          }"
          trigger="manual"
          @show="handlePopoverShow"
        >
          <div class="filters-container">
            <div class="close-btn">
              <div class="filters-title">Filters</div>
              <div style="display: flex; align-items: center">
                <div
                  class="filters-title"
                  style="font-size: 0.1111rem; cursor: pointer; color: #1d6eb1"
                  @click="handleClearAll"
                >
                  Reset
                </div>
                <div class="popover-close" @click="handlePopoverClose">
                  <img src="@/assets/close1.png" alt="" />
                </div>
              </div>
            </div>

            <div class="filters-content">
              <div class="filter-section">
                <div
                  class="section-label"
                  style="
                    margin-bottom: 15px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <div
                    style="width: 0.125rem; height: 0.125rem; margin-right: 5px"
                  >
                    <img
                      src="@/assets/file5.png"
                      alt=""
                      style="width: 100%; height: 100%"
                    />
                  </div>
                  Categories
                </div>
                <div class="checkbox-group" ref="categoriesGroup">
                  <el-checkbox
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    "
                    v-for="(label, index) in categoryLabels"
                    :key="index"
                    :label="label"
                    @change="handleCategoryChange(label, $event)"
                  >
                    {{ label }}
                    <!-- 动态显示对应分类的数量 -->
                    <span class="count">{{ getCategoryCount(label) }}</span>
                  </el-checkbox>
                </div>
              </div>
              <div class="filter-section">
                <div
                  class="section-time"
                  style="
                    font-weight: 600;
                    color: #454545;
                    display: flex;
                    align-items: center;
                  "
                >
                  <div
                    style="width: 0.125rem; height: 0.125rem; margin-right: 5px"
                  >
                    <img
                      src="@/assets/sort.png"
                      alt=""
                      style="width: 100%; height: 100%"
                    />
                  </div>
                  Sort
                </div>
                <div class="sort-options" @click.stop>
                  <el-radio-group
                    v-model="currentSortOption"
                    @change="handleSortChange"
                    style="display: flex; flex-direction: column"
                  >
                    <!-- 动态生成排序选项 -->
                    <el-radio
                      v-for="option in getSortOptions()"
                      :key="option.value"
                      :label="option.value"
                      class="sort-radio-option"
                    >
                      <span>{{ option.label }}</span>
                    </el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="filter-section">
                <div
                  class="section-label"
                  style="display: flex; align-items: center"
                >
                  <div
                    style="width: 0.125rem; height: 0.125rem; margin-right: 5px"
                  >
                    <img
                      src="@/assets/score.png"
                      alt=""
                      style="width: 100%; height: 100%"
                    />
                  </div>
                  Score
                </div>
                <div class="slider-container">
                  <el-slider
                    v-model="scoreRange"
                    :min="1"
                    :max="10"
                    range
                    @change="handleScoreRangeChange"
                  />
                </div>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    padding: 20px 3px 0px 3px;
                    margin-top: 14px;
                  "
                >
                  <span style="font-size: 14px">{{ scoreRange[0] }}</span>
                  <span style="font-size: 14px">{{ scoreRange[1] }}</span>
                </div>
              </div>
              <div class="filter-section">
                <div class="section-label" style="margin-bottom: 15px">
                  <div
                    style="width: 0.125rem; height: 0.125rem; margin-right: 5px"
                  >
                    <img
                      src="@/assets/reply.png"
                      alt=""
                      style="width: 100%; height: 100%"
                    />
                  </div>
                  Reply Status
                </div>
                <div class="radio-group">
                  <el-radio-group
                    v-model="currentReplyStatus"
                    @change="handleReplyStatusChange"
                    style="display: flex; flex-direction: column"
                  >
                    <el-radio
                      v-for="(label, index) in replyStatusLabels"
                      :key="index"
                      :label="label"
                      class="reply-radio"
                    >
                      {{ label }}
                    </el-radio>
                  </el-radio-group>
                </div>
              </div>
            </div>

            <div class="filter-buttons">
              <el-button @click="handleCancel">Cancel</el-button>
              <el-button type="primary" @click="handleApply">Apply</el-button>
            </div>
          </div>

          <el-button
            class="filter-button-text"
            slot="reference"
            @click.stop="togglePopover"
          >
            More Filters
          </el-button>
        </el-popover>
      </div>
    </div>
  </div>
</template>
<script>
import lang from "element-ui/lib/locale/lang/en";
import locale from "element-ui/lib/locale";

// Configure Element UI to use English
locale.use(lang);
const CATEGORY_MAP = {
  Location: "LOCATION_NEIGHBOURHOOD",
  Cleanliness: "CLEANLINESS",
  "Room & Amenities": "ROOM_COMFORT",
  "F&B Experience": "FOOD_BEVERAGE",
  "Hotel Facilities & Amenities": "HOTEL_AMENITIES_ATMOSPHERE",
  Services: "GUEST_EXPERIENCE_SERVICE",
  "Value for Money": "VALUE_FOR_MONEY",
};
// 优化节流函数，添加操作频繁提示功能
const throttleWithTip = (fn, delay, tipText) => {
  let lastCall = 0;
  let isShowingTip = false;

  return function (...args) {
    const now = new Date().getTime();
    const elapsed = now - lastCall;

    if (elapsed < delay) {
      if (!isShowingTip) {
        isShowingTip = true;
        this.$message({
          message: tipText,
          type: "warning",
          duration: 2000,
        });
        setTimeout(() => {
          isShowingTip = false;
        }, 2000);
      }
      return;
    }

    lastCall = now;
    fn.apply(this, args);
  };
};

export default {
  data() {
    return {
      popoverVisible: false,
      currentRange: "last3Months",
      dateRange: [],
      selectedCategories: [],
      selectedScoreRange: [1, 10],
      pickerConfig: {
        disabledDate: (time) => {
          return time > new Date();
        },
      },
      categoryLabels: [
        "Location",
        "Cleanliness",
        "Room & Amenities",
        "F&B Experience",
        "Hotel Facilities & Amenities",
        "Services",
        "Value for Money",
      ],
      replyStatusLabels: ["Replied", "Pending"],
      scoreRange: [1, 10],
      categoryCount: 21,
      replyStatusCount: 21,
      currentSortOption: "time_newToOld",
      currentReplyStatus: null,
      // 存储默认排序选项
      defaultSortOptions: [
        { value: "time_newToOld", label: "Time (newest first)" },
        { value: "time_oldToNew", label: "Time (oldest first)" },
        { value: "score_highToLow", label: "Score (high to low)" },
        { value: "score_lowToHigh", label: "Score (low to high)" },
      ],
      // 带权重的排序选项
      weightedSortOptions: [
        { value: "time_newToOld", label: "Time (newest first)" },
        { value: "time_oldToNew", label: "Time (oldest first)" },
        { value: "score_highToLow", label: "Score (high to low)" },
        { value: "score_lowToHigh", label: "Score (low to high)" },
        { value: "weight_highestFirst", label: "Weight (highest first)" },
      ],
    };
  },
  props: {
    categories: {
      type: Object, // 或 Array，根据实际数据类型调整
      default: () => ({}), // 或 []
    },
  },
  created() {
    this.setDefaultDateRange();
    this.handleSortChange(this.currentSortOption);
  },
  methods: {
    // 根据分类名称获取对应的数量
    getCategoryCount(label) {
      const categoryKey = CATEGORY_MAP[label];
      return this.categories[categoryKey] || 0;
    },
    // 切换弹出层显示/隐藏
    togglePopover() {
      this.popoverVisible = !this.popoverVisible;
      if (this.popoverVisible) {
        this.handlePopoverShow();
      }
    },
    // 获取排序选项（根据选中的category数量动态变化）
    getSortOptions() {
      // 当选中1个category时，显示带权重的排序选项
      if (this.selectedCategories.length === 1) {
        return this.weightedSortOptions;
      }
      // 其他情况显示默认排序选项
      return this.defaultSortOptions;
    },

    handleClearAll() {
      // 1. 清空分类选中数据（核心：先更新数据）
      this.selectedCategories = [];

      // 2. 强制DOM更新后，精确操作分类复选框（避免影响其他复选框）
      this.$nextTick(() => {
        // 精确选择「Categories」区域的复选框（通过父容器类定位，更可靠）
        const categoryCheckboxes = document.querySelectorAll(
          ".checkbox-group .el-checkbox__input"
        );
        categoryCheckboxes.forEach((checkbox) => {
          // 移除Element UI标识选中状态的类
          checkbox.classList.remove("is-checked");
          // 同步修改原生input的checked状态（双重保障）
          const input = checkbox.querySelector("input");
          if (input) input.checked = false;
        });

        // 3. 重置回复状态
        this.currentReplyStatus = null;
        const replyRadios = document.querySelectorAll(
          ".reply-radio .el-radio__input"
        );
        replyRadios.forEach((radio) => {
          radio.classList.remove("is-checked");
        });

        // 4. 重置排序选项为默认
        this.currentSortOption = "time_newToOld";
        this.handleSortChange(this.currentSortOption);

        // 5. 重置评分范围
        this.scoreRange = [1, 10];
        this.handleScoreRangeChange(this.scoreRange);

        // 6. 强制组件重新渲染（关键：确保UI与数据完全同步）
        this.$forceUpdate();

        // 7. 通知父组件筛选条件已重置
        this.$emit("filter-change", this.getCurrentFilters());
      });
    },

    // 核心修改：弹出层显示时强制设置位置
    handlePopoverShow() {
      // 仅保留弹出层定位逻辑，删除overflow和padding-right相关代码
      this.$nextTick(() => {
        const popoverEl = document.querySelector(".custom-filter-popover");
        if (popoverEl) {
          Object.assign(popoverEl.style, {
            width: "400px",
            position: "fixed",
            top: "0px",
            right: "10px",
            bottom: "0px", // 新增：让弹出层高度充满视口
            left: "auto",
            transform: "none",
            zIndex: "9999",
            margin: "0",
            overflow: "auto", // 弹出层内部滚动
          });
        }
      });
    },
    handleReplyStatusChange(label) {
      let isReply;
      if (label === "Replied") {
        isReply = true;
      } else if (label === "Pending") {
        isReply = false;
      } else {
        isReply = undefined;
      }

      this.$emit("filter-change", {
        ...this.getCurrentFilters(),
        isReply,
      });
    },

    handleSortChange(option) {
      let sortParams = {};
      // 处理权重排序的情况
      if (option === "weight_highestFirst") {
        sortParams = {
          orderBy: "weight",
          order: "desc",
        };
      } else if (option.startsWith("time_")) {
        sortParams = {
          orderBy: "date",
          order: option === "time_newToOld" ? "desc" : "asc",
        };
      } else {
        sortParams = {
          orderBy: "score",
          order: option === "score_highToLow" ? "desc" : "asc",
        };
      }
      this.$emit("sort-change", sortParams);
      this.$forceUpdate();
    },

    setDefaultDateRange() {
      this.handleRangeSelect(this.currentRange);
    },

    getThisYearRange() {
      const end = new Date();
      const start = new Date(end.getFullYear(), 0, 1);
      return [start, end];
    },

    getPreviousWeekRange() {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 7);
      return [start, end];
    },

    getPreviousMonthRange() {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 1);
      if (start.getDate() !== end.getDate()) {
        start.setDate(0);
      }
      return [start, end];
    },

    getPreviousQuarterRange() {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 3);
      if (start.getDate() !== end.getDate()) {
        start.setDate(0);
      }
      return [start, end];
    },

    handleRangeSelect(range) {
      this.currentRange = range;
      switch (range) {
        case "lastWeek":
          this.dateRange = this.getPreviousWeekRange();
          break;
        case "lastMonth":
          this.dateRange = this.getPreviousMonthRange();
          break;
        case "last3Months":
          this.dateRange = this.getPreviousQuarterRange();
          break;
        case "thisYear":
          this.dateRange = this.getThisYearRange();
          break;
      }
      this.$emit("date-change", this.dateRange);
    },

    handleDateRangeChange(val) {
      if (!val) return;

      const isLastWeek = this.isSameRange(val, this.getPreviousWeekRange());
      const isLastMonth = this.isSameRange(val, this.getPreviousMonthRange());
      const isLastQuarter = this.isSameRange(
        val,
        this.getPreviousQuarterRange()
      );

      if (isLastWeek) {
        this.currentRange = "lastWeek";
      } else if (isLastMonth) {
        this.currentRange = "lastMonth";
      } else if (isLastQuarter) {
        this.currentRange = "last3Months";
      } else {
        this.currentRange = "custom";
      }

      this.$emit("date-change", val);
    },

    isSameRange(range1, range2) {
      if (!range1 || !range2 || range1.length !== 2 || range2.length !== 2) {
        return false;
      }
      return (
        range1[0].getTime() === range2[0].getTime() &&
        range1[1].getTime() === range2[1].getTime()
      );
    },

    handleRefresh: throttleWithTip(
      function () {
        const refreshIcon = this.$refs.refreshIcon;
        if (refreshIcon) {
          refreshIcon.classList.add("clicked");
          setTimeout(() => {
            refreshIcon.classList.remove("clicked");
          }, 200);
        }
        this.setDefaultDateRange();
        this.$emit("refresh", this.dateRange);
        this.$emit("date-change", this.dateRange);
      },
      3000,
      "Operation too frequent, please try again later."
    ),

    // 关闭弹出层时同步状态
    handlePopoverClose() {
      this.popoverVisible = false;
      // document.body.style.overflow = "";
    },

    injectCalendarIcon() {
      this.$nextTick(() => {
        const dateInput = document.querySelector(".el-date-editor");
        if (!dateInput) return;

        const iconEl = document.createElement("i");
        iconEl.classList.add("el-icon-date");
        dateInput.appendChild(iconEl);

        Object.assign(iconEl.style, {
          position: "absolute",
          top: "10px",
          right: "15px",
        });
      });
    },

    handleCategoryChange(label, checked) {
      if (checked) {
        if (!this.selectedCategories.includes(label)) {
          this.selectedCategories.push(label);
        }
      } else {
        this.selectedCategories = this.selectedCategories.filter(
          (item) => item !== label
        );
      }
      // 当分类选择变化时，如果之前选择了权重排序且不再符合条件，重置排序选项
      if (
        this.currentSortOption === "weight_highestFirst" &&
        this.selectedCategories.length !== 1
      ) {
        this.currentSortOption = "time_newToOld";
        this.handleSortChange(this.currentSortOption);
      }
      this.$emit("filter-change", this.getCurrentFilters());
    },

    handleScoreRangeChange(val) {
      this.selectedScoreRange = val;
      this.$emit("filter-change", this.getCurrentFilters());
    },

    handleCancel() {
      this.handlePopoverClose();
    },

    async handleApply() {
      try {
        // 计算当前isReply（和handleReplyStatusChange保持一致）
        let isReply;
        if (this.currentReplyStatus === "Replied") {
          isReply = true;
        } else if (this.currentReplyStatus === "Pending") {
          isReply = false;
        } else {
          isReply = undefined;
        }
        // 合并isReply到筛选条件中
        const currentFilters = {
          ...this.getCurrentFilters(),
          isReply,
        };
        this.$emit("filters-applied", currentFilters);

        this.$message({
          type: "success",
          message: "The screening conditions have been applied",
          duration: 1500,
        });

        await this.handlePopoverClose();
      } catch (action) {
        if (action === "cancel") {
          this.$message({
            type: "info",
            message: "The application operation has been cancelled",
            duration: 1000,
          });
        }
      } finally {
        this.$nextTick(() => {
          const confirmBtn = document.querySelector(".el-message-box__confirm");
          if (confirmBtn) confirmBtn.loading = false;
        });
      }
    },

    getCurrentFilters() {
      const [sortType, sortOrder] = this.currentSortOption.split("_");
      // 处理权重排序的情况
      let sortParams;
      if (this.currentSortOption === "weight_highestFirst") {
        sortParams = {
          orderBy: "weight",
          order: "desc",
        };
      } else {
        sortParams = {
          orderBy: sortType,
          order:
            sortOrder === "newToOld" || sortOrder === "highToLow"
              ? "desc"
              : "asc",
        };
      }

      return {
        categories: this.selectedCategories,
        scoreRange: this.selectedScoreRange,
        dateRange: this.dateRange,
        sortParams: sortParams,
      };
    },
  },
  mounted() {
    this.injectCalendarIcon();
  },
  watch: {
    scoreRange(newVal) {
      this.handleScoreRangeChange(newVal);
    },
    // 监听分类变化，确保排序选项正确更新
    selectedCategories() {
      this.$forceUpdate();
    },
  },
};
</script>
<style scoped lang="scss">
.el-date-range-picker__header div {
  font-size: 40px;
}
.date-picker-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.4444rem;
  margin-top: 20px;
  padding: 0 24px;
  border: 1px solid #cdcccc;
  // border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.date-picker-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.date-range-option {
  padding: 10px 16px;
  font-size: 0.0972rem;
  font-weight: 400;
  color: #232323;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;

  &.is-active {
    font-size: 0.0972rem;
    background-color: #4485e9;
    color: #fff;
    font-weight: 400;
  }
}

.custom-date-picker {
  width: 1.7292rem;
  // height: 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #6a6969;
  border-radius: 0.0278rem;
  // padding: 10px 0 0;
}

.date-range-title {
  padding: 0 14px;
  font-size: 10px;
  font-weight: 400;
  color: #8f8f8f;
}

.date-picker-input {
  ::v-deep .el-input__inner {
    border: 1px solid #fff;
    border-radius: 8px;
    width: 1.7083rem;
    display: flex;
    align-items: center;
    text-align: center;
    padding: 3px 0;
    background-color: transparent !important;
    color: #000 !important;
  }

  ::v-deep .el-input__suffix {
    right: -90px;
    color: #000 !important;
  }

  ::v-deep .el-range__icon {
    display: none;
  }
}

.date-picker-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.refresh-button {
  width: 0.2222rem;
  height: 0.2222rem;
  display: flex;
  align-items: center;
  justify-content: center;

  .refresh-icon {
    width: 0.2222rem;
    height: 0.2222rem;
    cursor: pointer;
    padding: 2px;
    box-sizing: content-box;

    &:hover {
      opacity: 0.8;
    }
  }
}

.filter-button-text {
  font-size: 0.0972rem;
  font-weight: 600;
  color: #f5f2ea;
  background: #0d4c80;
  padding: 0.0347rem 0.0833rem;
  border-radius: 0.0278rem;
}

.filters-container {
  box-sizing: border-box;
  width: 100% !important;
  padding: 10px !important;
}

.filters-title {
  font-size: 0.125rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: #454545;
}
.close-btn > div:nth-child(2) > .filters-title:hover {
  opacity: 0.8; // 透明度变化
  transform: scale(1.05); // 轻微放大
}
.popover-close {
  width: 0.2083rem;
  height: 0.2083rem;
  margin-top: -15px;
  margin-left: 5px;
  &:hover {
    opacity: 0.8; // 与Reset相同的透明度变化
    transform: scale(1.1); // 与Reset相同的轻微放大
  }

  img {
    width: 100%;
    height: 100%;
  }
}

::v-deep .filter-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;

  &:last-child {
    border-bottom: none;
  }

  .section-label,
  .section-time {
    font-size: 0.0972rem;
    font-weight: 600;
    color: #454545;
    display: flex;
    align-items: center;
  }

  .checkbox-group {
    display: flex;
    flex-direction: column;
    // gap: 7px;

    .el-checkbox {
      margin-right: 0;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      .el-checkbox__label {
        color: #333;
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding-left: 0px;
        // margin-bottom: 5px;
        width: calc(100% - 30px) !important;
        white-space: normal !important;
      }

      .count {
        margin-left: auto;
        padding-left: 8px;
        font-weight: 600;
      }
    }
  }

  .score-desc {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-top: 4px;
  }
}

.slider-container {
  width: 100%;
  padding: 0 10px;
}

::v-deep .el-checkbox__label {
  font-size: 0.0833rem;
  color: #454545;
  font-weight: 400;
}

.filter-buttons {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;

  ::v-deep .el-button {
    border: none;
    font-size: 0.1111rem;
    color: #fff;
    background: #0d4c80;
    width: 100% !important;
    padding: 5px;
    &:hover {
      /* 鼠标移入时的样式 */
      opacity: 0.8;
      background: #0d4c80; /* 保持原有背景色，避免Element UI默认hover样式覆盖 */
      color: #fff; /* 保持文字颜色 */
    }
  }
}

.close-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filters-content {
  display: flex;
  flex-direction: column;
  padding-right: 8px;
  margin-bottom: 16px;
  height: calc(100vh - 140px);
  padding-right: 0;
  overflow-y: auto;
  overflow-x: hidden !important;
  width: calc(100% + 15px) !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 2px;
  }
}

::v-deep {
  .el-date-editor .el-range-separator {
    margin: 0 5px !important; // 调整分隔符与输入框的间距

    // font-size: 0.0972rem;
  }

  .el-date-editor .el-range-input {
    width: 38%;
    font-size: 0.0972rem;
    color: #000 !important;
    height: 100% !important;
    // 行高与高度一致（单行文本垂直居中的关键）
    line-height: 0.2083rem !important;
    // 清除默认内边距，避免挤压文本
    padding: 0 !important;
    // 确保文本在输入框内居中
    text-align: center !important;
  }
}

::v-deep .custom-filter-popover {
  width: 400px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  border: none !important;
  background: #fff !important;
  opacity: 0;
  transform: translateX(10px); /* 轻微右移，模拟滑入效果 */
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-family: "Inter Variable", sans-serif !important;
}
// 补充：若部分组件字体未被覆盖，可针对性加强（可选）
::v-deep .filters-container,
::v-deep .filter-section,
::v-deep .el-checkbox__label,
::v-deep .el-radio__label,
::v-deep .el-button,
::v-deep .section-label,
::v-deep .section-time,
::v-deep .count {
  font-family: "Inter Variable", sans-serif !important;
}
/* 显示时的动画 */
::v-deep .custom-filter-popover.popper-fade-enter-active {
  opacity: 1;
  transform: translateX(0); /* 回到正常位置 */
}

::v-deep .custom-filter-popover .popper__arrow {
  display: none !important;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.sort-options {
  margin-top: 15px;
  padding-left: 0;
}

.sort-radio-option {
  font-size: 10px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  margin-bottom: 15px;
  justify-content: space-between;
  width: 100%;
  flex-direction: row-reverse;
  text-align: left;

  ::v-deep .el-radio__label {
    padding-left: 0px !important;
    order: 1;
    font-size: 0.0833rem !important;
    padding-right: 8px;
  }

  .el-radio__inner {
    width: 0.0972rem !important;
    height: 0.0972rem !important;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-right: 4px;
    background-color: transparent;
  }

  .el-radio__inner:after {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #4e99e1;
    border-radius: 1px;
    transform: scale(0);
    transition: transform 0.15s;
  }

  &.is-selected {
    background-color: rgba(78, 153, 225, 0.1);
    border: 1px solid #4e99e1;
    padding: 1px 5px;

    span {
      color: #4e99e1;
    }

    .el-radio__inner {
      border-color: #4e99e1;
    }

    .el-radio__inner:after {
      transform: scale(1);
    }
  }
}

/* 修复滑块样式：保持原有结构，仅修改跑道背景 */
::v-deep .el-slider {
  width: 100%;
  height: 8px;

  .el-slider__runway {
    height: 8px;
    border-radius: 4px;
    background: transparent; /* 隐藏默认背景 */
    position: relative; /* 用于定位色块 */

    /* 新增：10个纯色区块背景（无渐变） */
    &::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 100%;
      border-radius: 4px;
      background: linear-gradient(
        to right,
        #8b0000 0% 20%,
        /* 1-3分：深红 */ #e51837 20% 45%,

        /* 3-5分：浅红 */ #f68d2b 45% 70%,
        /* 5-7分：橙 */ #fc0 70% 80%,
        /* 7-8分：黄 */ #2faa68 80% 90%,
        /* 8-9分：绿 */ #006400 90% 100% /* 9-10分：深绿 */
      );

      z-index: 1; /* 确保在滑块下方 */
    }
  }

  /* 移除滑块已选择部分的蓝色覆盖 */
  .el-slider__bar {
    display: none; /* 完全隐藏蓝色覆盖层 */
  }

  /* 滑块按钮样式 */
  .el-slider__button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #1d6eb1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s;
    z-index: 3; /* 确保在最上层 */

    &:hover {
      transform: scale(1.1);
    }
  }
}

/* 保持其他Element UI组件样式不变 */
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #1d6eb1 !important;
}
::v-deep.radio-group .reply-radio .el-radio__label {
  font-size: 0.0833rem !important;
}
::v-deep .el-checkbox__inner,
::v-deep .el-radio__inner {
  border: 1px solid #1d6eb1;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
::v-deep .el-radio__input.is-checked .el-radio__inner {
  border: 1px solid #1d6eb1;
  background-color: #1d6eb1;
}
::v-deep .radio-group {
  .reply-radio {
    display: flex;
    // 关键：反向排列（文本左、单选框右）
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
    .el-radio__label {
      color: #333;
      width: calc(100% - 30px);
      padding-left: 0; // 移除左侧内边距
      padding-right: 8px; // 右侧留间距
      text-align: left; // 强制左对齐
    }
    .el-radio__input {
      margin-left: 0;
      margin-right: 0;
    }
    .count {
      font-weight: 600;
      margin-left: 8px;
    }
  }

  // 选中状态样式
  .el-radio__input.is-checked .el-radio__inner {
    background-color: #1d6eb1;
    border-color: #1d6eb1;
  }

  .el-radio__input.is-checked + .el-radio__label {
    color: #1d6eb1;
  }
}
// 彻底隐藏日期范围选择器的清除图标（×）
::v-deep .el-date-editor .el-range__close-icon {
  display: none !important;
}
/* 在两个组件的 <style> 中都添加以下代码 */

/* 强制日历图标大小一致（以小的为准） */
::v-deep .el-icon-date {
  width: 16px !important; /* 小图标的宽度 */
  height: 16px !important; /* 小图标的高度 */
  font-size: 16px !important; /* 图标字体大小（影响视觉大小） */
}

/* 修正父元素 suffix 的偏移，避免图标被拉伸 */
::v-deep .el-input__suffix {
  right: 10px !important; /* 统一右侧距离，避免极端偏移 */
  transform: none !important; /* 清除可能的缩放 */
}
</style>
